<template>
  <van-scroll :scroll-x="true" :scroll-y="false" eventPassthrough="vertical">
    <div class="grid">
      <div class="grid-item" v-for="item in list" :key="item.id">
        <div class="grid-item-flex">
          <div class="grid-item-flex__icon" :style="{ backgroundColor: iconColor }">
            <img :src="item.iconUrl || item.picIPadUrl"  @click="handleGoNavsPage(item.url)" />
          </div>
          <div class="grid-item-flex__title">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </van-scroll>
</template>

<script setup>
import VanScroll from '@/components/scroll/Scroll.vue';
import { useMyRouters } from '@/router';

defineProps({
  list: {
    type: Array,
    default: []
  },
  iconColor: {
    type: String,
    default: '#ec4141'
  }
});

const { router } = useMyRouters();

function handleGoNavsPage(url) {
  router.push({
    path: url
  });
}
</script>

<style lang="less" scoped>
.scroll {
  white-space: nowrap;
  .grid {
    display: inline-block;
    padding: 10px 0;
    .grid-item {
      width: 70px;
      display: inline-block;
      .grid-item-flex {
        display: flex;
        flex-direction: column;
        align-items: center;
        .grid-item-flex__icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          box-sizing: border-box;
          overflow: hidden;
          img {
            width: 40px;
            height: 40px;
          }
        }
        .grid-item-flex__title {
          padding-top: 5px;
        }
      }
    }
  }
}
</style>
